/* 
分析实例代码，柱状图需要传入 x轴 y轴的数据
饼状图只传入数据即可，
所以需要进行判断
*/
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';


// echarts 的配置数据
const axisOption = {
    // 图例文字颜色
    textStyle: {
        color: '#333',
    },
    // 提示框
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category', //类目轴
        data: [],
        axisLine: {
            lineStyle: {
                color: '#17b3e3',
            }
        },
        axisLabel: {
            interval: 0,
            color: '#333',
        }
    },
    yAxis: [
        {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#17b3e3',
                }
            },
        }
    ],
    color: ['#2ec7c9', '#b6a2de', '#5ablef', '#ffb980', '#d87a80', '#8d98b3'],
    series: []
}

// 饼状图
const normalOption = {
    tootip: {
        trigger: 'item'
    },
    color: [
        '#0f78f4',
        '#dd536b',
        '#9462e5',
        '#a6a6a6',
        '#e1bb22',
        '#39c362',
        '#3ed1cf'
    ],
    series: []
}

function Echarts({ style, chartData, isAxisChart = true }) {
    const echartRef = useRef()
    let echartObj = useRef(null)
    useEffect(() => {
        let options

        // echarts 的初始化， 通过调用 init 方法，传入 DOM 元素
        echartObj.current = echarts.init(echartRef.current)
        // 对初始化出的图表 设置 option， 所以要使用变量接受上行代码
        if(isAxisChart) {
            // 设置 x 轴
            axisOption.xAxis.data = chartData.xData
            axisOption.series = chartData.series
            /* 有坐标系的情况 */

            options = axisOption
        }else {
            normalOption.series = chartData.series

            options = normalOption
        }
        echartObj.current.setOption(options)

    }, [chartData])
    return (
        <div style={style} ref={echartRef}></div>
    )
}

export default Echarts